<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="email=no" />
    <title>我要提现</title>
    <link rel="stylesheet" href="stylesheets/withdraw.css">
    <link rel="stylesheet" href="stylesheets/mobiscroll-2.13.2.full.min.css">
    <style type="text/css">
        *::-webkit-input-placeholder{font-size:0.30rem;color:#999;}
        #reasonData_dummy{position:absolute;left:-9999px;top:0;}
    </style>
</head>
<body ontouchstart>
    <div id="con">
        <div class="part-top">
            <p class="r-txt">单次提现金额不低于500元，按100元递增</p>
            <p class="money-box">
                <span class="m-left">¥</span>
                <input id="doMoney" type="text" placeholder="请输入提现金额">
            </p>
            <p class="r-txt2">选择分期</p>
            <p class="btnBox">
                <span class="countBtn conHide" c_num="3">3期</span>
                <span class="countBtn conHide" c_num="6">6期</span>
                <span class="countBtn conHide" c_num="9">9期</span>
                <span class="countBtn conHide" c_num="12">12期</span>
            </p>
        </div>
        <div class="part-down">
            <p class="infoBox">
                <span class="info-name">申请用途</span>
                <input class="info-value" id="loanReason" type="text" name="reasonData" placeholder="请选择申请用途" readonly>
                <i></i>
            </p>
            <div class="selectBox">
                <select id="reasonData" class="reasonData" data-role="none">
                    <option value="0">购买大额生活用品</option>
                    <option value="1">装修/教育</option>
                    <option value="2">医疗</option>
                    <option value="4">旅游</option>
                </select>
            </div>
            <div class="part-info">
                <div class="i-left">
                    <p class="l-txt1">每日约还</p>
                    <p class="l-txt2">(含本金、按月还、以最终协议为准)</p>
                </div>
                <div class="i-right"><span class="dayPay">60.42</span>元</div>
            </div>
        </div>
        <button type="button" id="submitBtn">立即提现</button>
        <p class="r-txt3">如遇问题，请咨询客服：400-998-7860</p>
        <input type="hidden" id="enable_period" value="{{$enable_period}}">
        <input type="hidden" id="default_period" value="{{$default_period}}">
    </div>
    <script src="js/plugins/jquery-3.2.1.min.js"></script>
    <script src="js/plugins/fastclick.js"></script>
    <script src="js/plugins/mobiscroll-2.13.2.full.min.js"></script>
    <script src="js/plugins/layer.js"></script>
    <script type="text/javascript">
        $(function(){
            FastClick.attach(document.body);
            var enable_period = $("#enable_period").val();
            var default_period = $("#default_period").val();
            var Page = function(){};
            $.extend(Page.prototype , {
                withDrawMoney : 0,  // 提现金额
                widthDrawCount : default_period,
                enable_period : enable_period,
                init : function(){
                    this.bindEvents();
                },
                bindEvents : function(){
                    var moneyInputReg = /^[1-9]\d/,
                        moneyBlurReg = /^[1-9]\d{2,}/,
                        _self = this;
                    var btns = $(".countBtn");
                    for(var i=0;i<_self.enable_period.length;i++){
                        for(var j=0;j<btns.length;j++){
                            if(_self.enable_period[i] == btns[j].attr("c_num")){
                                btns[j].removeClass("conHide");
                                if(_self.widthDrawCount == btns[j].attr("c_num")){
                                    btns[j].addClass("count_checked");
                                }
                                break;
                            }
                        }
                    }
                    var opt = {};
                        opt.default = {
                            theme: "android-ics light",
                            display: 'bottom',
                            lang: "zh",
                        };
                    opt.select1 = {preset : "select" , headerText:"请选择借款用途"};
                    $("#reasonData").scroller($.extend(opt['default'] , opt['select1']));
                    $("#loanReason").on("click",function(){
                        $("#reasonData_dummy").focus();
                    });
                    $("#reasonData").on("change",function(){
                        $("#loanReason").val($(this).find("option:selected").html());
                    });
                    $("#doMoney").on("input",function(){
                        _self.withDrawMoney = $(this).val();
                        if(!moneyInputReg.test(_self.withDrawMoney)){
                            _self.withDrawMoney = _self.withDrawMoney.substring(0 , _self.withDrawMoney.length - 1);
                            $(this).val(_self.withDrawMoney);
                        }
                    });
                    $("#doMoney").on("blur",function(){
                        if(_self.withDrawMoney === 0){
                            _self.layerInfo("请输入提现金额！");
                            return false;
                        }
                        if(!moneyBlurReg.test(_self.withDrawMoney)){
                            _self.layerInfo("金额输入格式非法，请重新输入");
                            $("#doMoney").focus();
                            return false;
                        }
                        if(parseInt(_self.withDrawMoney) < 500){
                            _self.layerInfo("单次提现金额不低于500元");
                            $("#doMoney").focus();
                            return false;
                        }
                        if(parseInt(_self.withDrawMoney) % 100 !== 0){
                            _self.withDrawMoney = Math.ceil(parseInt(_self.withDrawMoney) / 100) * 100;
                            $("#doMoney").val(_self.withDrawMoney);
                        }
                        $(this).attr("disabled" , "disabled");
                    });
                    // 选择期数
                    $(".countBtn").on("click",function(){
                        _self.widthDrawCount = $(this).attr("c_num");
                        $(this).addClass("count_checked").siblings().removeClass("count_checked");
                    });

                    // 立即提现
                    $("#submitBtn").on("click",function(){
                        if(_self.withDrawMoney === 0){
                            _self.layerInfo("请输入提现金额！");
                            return false;
                        }
                        if(!moneyBlurReg.test(_self.withDrawMoney)){
                            _self.layerInfo("金额输入格式非法，请重新输入");
                            $(this).focus();
                            return false;
                        }
                        if(parseInt(_self.withDrawMoney) < 500){
                            _self.layerInfo("单次提现金额不低于500元");
                            $(this).focus();
                            return false;
                        }
                        if(parseInt(_self.withDrawMoney) % 100 !== 0){
                            _self.withDrawMoney = Math.ceil(parseInt(_self.withDrawMoney) / 100) * 100;
                            $(this).val(_self.withDrawMoney);
                        }
                    });
                },
                layerInfo : function(str){
                    layer.open({
                        skin:'msg',
                        content : str,
                        time : 2
                    });
                }
            });
            var page = new Page();
            page.init();
        });
    </script>
</body>
</html>